<template>
  <Content :title="title">
    <view class="all-view">
      <view class="header-box">
        <view class="input-box">
          <view class="my-select-box">
            <MySelect
              v-model="workCode"
              :option="optionA"
              :clearable="false"
            ></MySelect>
            <u-input
              v-model="search[workCode]"
              class="input"
              @change="searchChange"
              placeholder="请输入筛选条件"
              clearable
            ></u-input>
          </view>
        </view>
      </view>

      <view class="main-box">
        <template v-if="data && data.length === 0">
          <Empty></Empty>
        </template>
        <List
          ref="orderList"
          v-else
          :type="type"
          :scrollNoData="scrollNoData"
          :data="data"
          :pageStatus="pageStatus"
          @ok="ok"
          @itemClick="itemClick"
          @onRefresh="onRefresh"
          @scrollBottom="scrollBottom"
        ></List>
      </view>
    </view>
    <u-popup :show="show" mode="right" @close="close" @open="open">
      <view class="popup-box">
        <view class="title">筛选项</view>
        <u-collapse :value="['1']" ref="collapse">
          <u-collapse-item title="工单状态" name="1">
            <MySelectBlock
              dictCode="工单状态"
              @mounted="mySelectBlockMounted"
              v-model="stateList"
            ></MySelectBlock>
          </u-collapse-item>
        </u-collapse>

        <view class="btn-v">
          <view class="but-box">
            <u-button class="btn" text="取消" @click="collapseClose"></u-button>
            <u-button
              class="btn"
              @click="collapseChange"
              type="primary"
              text="确定"
            ></u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </Content>
</template>

<script>
import MySelect from "@/components/mySelect";
import MySelectBlock from "@/components/mySelectBlock";
import MyNavList from "@/components/myNavList";
import Content from "@/components/content/index.vue";
import Empty from "@/components/empty";
import List from "./list";
import fetch from "@/utils/fetch";
import { getUserInfo } from "@/store/user";
export default {
  props: {
    title: String,
    type: {
      //1 块点击  2里面的内容行点击
      type: String,
      default: "1",
    },
    pageStatus: String, //页面标识
  },
  components: {
    MySelect,
    Empty,
    Content,
    List,
    MyNavList,
    MySelectBlock,
  },
  data() {
    return {
      search: {
        workCode: "",
        deviceCode: "",
        materialCode: "",
        materialName: "",
        moldCode: "",
        moldName: "",
        pageNum: 1,
        pageSize: 10,
        stateList: [],
      },
      workCode: "deviceCode",
      optionA: [
        {
          label: "工单号",
          value: "workCode",
        },
        {
          label: "设备编号",
          value: "deviceCode",
        },
        {
          label: "物料编号",
          value: "materialCode",
        },
        {
          label: "物料名称",
          value: "materialName",
        },
        {
          label: "模具编号",
          value: "moldCode",
        },
        {
          label: "模具名称",
          value: "moldName",
        },
      ],
      data: [],
      show: false,
      scroll: false,
      scrollNoData: false,
      navIndex: 0,
      stateList: [],
    };
  },
  mounted() {
    this.getList(true);
  },
  methods: {
    rest() {
      const obj = {
        workCode: "",
        deviceCode: "",
        materialCode: "",
        materialName: "",
        moldCode: "",
        moldName: "",
      };
      delete obj[this.workCode];
      this.search = Object.assign(this.search, obj);
    },
    searchChange() {
      this.rest();
      this.onRefresh();
    },
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    onRefresh() {
      this.$loading.open();
      this.getList(true);
    },
    mySelectBlockMounted() {
      this.$nextTick(() => {
        this.$refs.collapse.init();
      });
    },
    collapseChange() {
      this.show = false;
      this.search.stateList = JSON.parse(JSON.stringify(this.stateList));
      this.onRefresh();
    },
    collapseClose() {
      this.show = false;
      this.stateList = JSON.parse(JSON.stringify(this.search.stateList));
    },
    ok() {},
    itemClick(data) {
      this.$emit("itemClick", data);
    },
    scrollBottom(next) {
      const that = this;
      if (!that.scrollNoData) {
        that.search.pageNum = that.search.pageNum + 1;
        that.scroll = true;
        that.getList().then(() => {
          next(that.scrollNoData);
        });
        return;
      }
      next();
    },
    getList(arg) {
      const that = this;
      that.$loading.open();
      if (arg) {
        that.search.pageNum = 1;
        that.scroll = false;
        that.scrollNoData = false;
        that.data = [];
      }
      let obj = {};
      console.log("that.search", that.search);
      for (const key in that.search) {
        if (Object.hasOwnProperty.call(that.search, key)) {
          const element = that.search[key];
          if (Array.isArray(element) ? element.length > 0 : element)
            obj[key] = element;
        }
      }
      let fn = "";
	  console.log(that.pageStatus)
      switch (that.pageStatus) {
        case "production-reporting":
        case "sel-inspection-scrapping":
        case "materials-handling":
          fn = fetch("post", "/dms/mobile/selectUserDeviceFifteenDays", {
            ...obj,
            deviceCode: obj.deviceCode,
          });
          break;
        case "line-cleaning":
          fn = fetch("post", "/dms/mobile/clearLineWorkPage", obj);
          break;
        default:
          fn = fetch("post", "/dms/mobile/orderWorkPageByUserId", obj);
          break;
      }
      return fn.then(({ data }) => {
        const workList = data?.records.map((item) => {
          return {
            ...item,
            fifteenDaysWorkVoList: item.fifteenDaysWorkVoList
              ? item.fifteenDaysWorkVoList
              : item.workList,
          };
        });
        console.log("that.scroll", that.scroll);
        if (that.scroll) {
          if ((workList || []).length === 0) {
            that.scrollNoData = true;
          } else {
            that.data.push(...workList);
          }
        } else {
          that.data = workList || [];
        }
        that.$loading.close();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.all-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header-box {
  padding: 5px 20px;
  background-color: #ffffff;
}

.input-box {
  display: flex;
  align-items: center;
  overflow: auto;

  .my-select-box {
    flex: 1;
    background-color: #f3f5f6;
    margin-right: 20rpx;
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 5px;

    /deep/ .my-select {
      width: 104px;
    }
  }

  /deep/ .u-input {
    border: none;
    background-color: transparent;
  }

  .icon {
  }
}

.nav-list-box {
  margin-bottom: 20rpx;
}

.main-box {
  padding: 20rpx;
  flex: 1;
  overflow: auto;
}

.action-box {
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 10px;
  background-color: #ffffff;
}
</style>
